<!--
~ Licensed to the Apache Software Foundation (ASF) under one or more
~ contributor license agreements.  See the NOTICE file distributed with
~ this work for additional information regarding copyright ownership.
~ The ASF licenses this file to You under the Apache License, Version 2.0
~ (the "License"); you may not use this file except in compliance with
~ the License.  You may obtain a copy of the License at
~
~    http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

<div class="parameter-group-table h-full flex flex-col">
    <div class="flex-1 relative">
        <div class="listing-table overflow-y-auto absolute inset-0">
            <table
                mat-table
                [dataSource]="parameterGroupsDataSource"
                matSort
                matSortDisableClear
                matSortActive="groupName"
                matSortDirection="asc"
                (matSortChange)="sort($event)">
                <ng-container matColumnDef="groupName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Parameter Group Name</th>
                    <td mat-cell *matCellDef="let item" class="items-center">
                        <div>{{ item.groupName }}</div>
                    </td>
                </ng-container>

                <ng-container matColumnDef="indicators">
                    <th mat-header-cell *matHeaderCellDef></th>
                    <td mat-cell *matCellDef="let item">
                        <div class="flex items-center gap-x-2">
                            @if (isSyncedToParameterContext(item)) {
                                <div class="fa fa-star primary-color" title="Synced to a parameter context."></div>
                            }
                        </div>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                <tr
                    mat-row
                    *matRowDef="let row; let even = even; columns: displayedColumns"
                    (click)="select(row)"
                    [class.selected]="isSelected(row)"
                    [class.even]="even"></tr>
            </table>
        </div>
    </div>
</div>
